<template>
  <div class="cart">

    <div class="group-item">
      <van-cell-swipe :right-width="65">
          <div class="item-cell"> 
              <cart-prd @onChange="onChange" @selectChecked="selectChecked"></cart-prd>
          </div>
          <span slot="right" class="delete-span " @click="deleteItem()">删除</span>
      </van-cell-swipe>        
    </div>

    <van-submit-bar
        class="footer-sub"
        :price="3050"
        button-text="提交订单"
        @submit="onSubmit">
        <van-checkbox class="checked" v-model="checked" >全选</van-checkbox>
    </van-submit-bar>

  </div>
</template>

<script>
import { Dialog,CellSwipe } from 'vant'
import cartPrd from './tpl/cartPrd'
export default {
  name: 'cartPage',
  created (){
  
  },
  data () {
    return {
        checked:false,  //全选
    }
  },
  watch:{
      //全选
      checked(cur,old){
            console.log('全选');
      }
  },
  methods:{
      //选择购买数量
      onChange(val){
          console.log(val);
      },
      deleteItem(){
          console.log('delete');
      },
      onSubmit(){
          console.log('提交订单');
      },
      //单选
      selectChecked(){
         console.log('单选');
      }
  },
  mounted(){
        document.title="购物车"
  },
  components:{
    cartPrd
  }
}
</script>


<style scoped lang="scss">
.cart{
    .group-item{
        border-top:.013333rem solid #ececec;
        border-bottom:.013333rem solid #ececec;
        margin-bottom:.133333rem;
        .item-cell{

        }
        .delete-span{
            box-sizing:border-box;
            display: inline-block;
            width: 65px;
            height: 2.8rem;
            line-height: 2.3rem;
            padding: 10px 15px ;
            color: #fff;
            background: #e4393c;
        }
    }
    .group-item::first-child{
        margin-top:.106667rem;
    }
    .footer-sub{
        bottom:1.333333rem;
        .checked{
            margin-left:.266667rem;
        }

    }
}
</style>
